<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-size: 16px;
			color: #000;
		}

		.box {
			width: 280px;
			height: 180px;
			background: #e8eaec;
			opacity: 0.85;
			padding: 0.5rem;
		}

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.status-list {
			display: flex;
		}

		.status {
			padding-right: 0.75rem;
		}

		.status-txt {
			font-size: 14px;
		}

		.status-busy-dot {
			width: 10px;
			height: 10px;
			background: #ff0000;
			border-radius: 50%;
			display: inline-block;
		}

		.status-online-dot,
		.status-idle-dot,
		.status-registed-dot {
			width: 10px;
			height: 10px;
			background: #19be6b;
			border-radius: 50%;
			display: inline-block;
		}

		.content {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100px;
		}

		.btn-call {
			padding: 0.5rem 1rem;
			font-size: 18px;
			background: #c5c8ce;
			border-radius: 0.5rem;
		}

		.btn-list {
			display: flex;
			align-items: center;
			margin-top: 0.5rem;
		}

		.btn {
			margin-right: 0.5rem;
			padding: 0.25rem 0.5rem;
			font-size: 0.875rem;
			background: #c5c8ce;
			border-radius: 0.25rem;
		}

		.active {
			background: #08979c;
			color: #fff;
		}
	</style>
</head>

<body>
	<div class="box" id="unflodBox" style="display: none;">
		<div class="header">
			<div class="status-list">
				<div class="status status-busy">
					<span class="status-busy-dot"></span>
					<span class="status-txt">忙</span>
				</div>
				<div class="status status-online">
					<span class="status-online-dot"></span>
					<span class="status-txt">在线</span>
				</div>
				<div class="status status-idle">
					<span class="status-idle-dot"></span>
					<span class="status-txt">空闲</span>
				</div>
				<div class="status status-registed">
					<span class="status-registed-dot"></span>
					<span class="status-txt">已注册</span>
				</div>
			</div>
			<div class="fold-icon" onclick="updateBoxContent('flod')">
				<img src="./images/contract.png" width="16" height="16" />
			</div>
		</div>
		<div class="content">
			<div class="btn-call" onclick="call()">开始呼叫</div>
		</div>
		<div class="btn-list">
			<div class="btn active" id="autoAnswerBtn" onclick="onClickFW({ fnName: 'autoAnswer' })">自动接听</div>
			<div class="btn" onclick="updateStatus('Busy')">置忙</div>
			<div class="btn" onclick="updateStatus('Idle')">置闲</div>
			<div class="btn">长签</div>
		</div>
	</div>
	<img src="./images/icon.png" width="50" height="50" id="flodBox" onclick="updateBoxContent('unflod')">
</body>
<script>
	const vConsole = new VConsole();
	let status = 'Idle', registed = false, isFlod = '1';
	//获取url参数
	function GetUrlParam(paramName) {
		let url = decodeURI(window.location.href);
		var arrObj = url.split("?");
		if (arrObj.length > 1) {
			var arrPara = arrObj[1].split("&");
			var arr;
			for (var i = 0; i < arrPara.length; i++) {
				arr = arrPara[i].split("=");
				if (arr != null && arr[0] == paramName) {
					return arr[1];
				}
			}
		}
		return "";
	}

	function onClickFW(params) { //点击事件
		Android.onClickFW(JSON.stringify(params || {}));
	}
	function goApp () { // 进入app
		Android.goApp('')
	}

	function call () { // 呼叫
		goApp()
		onClickFW({ fnName: 'call' })
	}
	
	function updateStatus (newStatus) {
		if (newStatus == status) return
		onClickFW({ fnName: 'changeStatus', paramStr: newStatus })
	}

	function updateStatusContent(status, registed) { //监听状态更新
		switch (status) {
			case 'Busy': //忙
				document.querySelector(".status-busy").style.display = 'block'
				document.querySelector(".status-idle").style.display = 'none'		
				break;
			case 'Idle': //空闲
				document.querySelector(".status-busy").style.display = 'none'
				document.querySelector(".status-idle").style.display = 'block'
				break;
		}
		document.querySelector(".status-registed").style.display = registed ? 'block' : 'none'
	}

	function updateData(data) { //监听数据更新
		console.log('updateData', data)
		try {
			const _data = JSON.parse(data)
			switch (_data.type) {
				case 'AutoAnswer': //自动接听
					if (_data.value === '1') {
						document.querySelector("#autoAnswerBtn").classList.remove('active')
					} else {
						document.querySelector("#autoAnswerBtn").classList.add('active')
					}
					break;
				case 'Status': //状态
					status = _data.value
					updateStatusContent(status, registed)
					break;
				case 'Registed': //注册
					registed = _data.value === '1'
					updateStatusContent(status, registed)
					break;
			}
			return '更新成功'
		} catch (error) {
			console.log('updateData error', error)
			return error
		}
	}

	function updateBoxContent (flodStatus) { //展开收起
		const value = flodStatus == 'flod' ? '1' : '0'
		if (value == isFlod) {
			onClickFW()
		} else {
			onClickFW({ fnName: flodStatus })
		}
	}

	function expandContent () { //展开
		document.querySelector("#unflodBox").style.display = 'block'
		document.querySelector("#flodBox").style.display = 'none'
		isFlod = '0'
	}

	// 初始化
	function init () {
		isFlod = GetUrlParam('isFlod') || '1'
		status = GetUrlParam('status') || 'Idle'
		registed = GetUrlParam('registed') === '1'
		console.log('window', window)
		if (isFlod != '1') {
			expandContent()
			updateStatusContent(status, registed)
		}
	}

	init()
</script>

</html>